<template>
  <van-sticky>
    <van-nav-bar :title="title" @click-left="clickLeft" @click-right="clickRight" left-arrow>
      <template #left>
        <van-icon v-if="leftArrow" :color="color" size="20" :name="leftIcon" /><span :style="color">{{ leftText }}</span>
      </template>
      <template #right>
        <span :style="color" @click-right="clickRight">{{ rightText }}</span>
      </template>
    </van-nav-bar>
  </van-sticky>
</template>

<script lang="ts">
  export default {
    name: 'CommonHeader',
  };
</script>
<script setup lang="ts">
  import { ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  interface topTitleProps {
    title?: string;
    leftIcon?: string;
    leftText?: string;
    rightText?: string;
    color?: string;
    leftArrow?: Boolean;
  }

  // 携带默认值的props
  withDefaults(defineProps<topTitleProps>(), {
    title: '',
    leftIcon: 'arrow-left',
    leftText: '',
    rightText: '',
    color: '#333',
  });

  const emit = defineEmits(['clickLeft', 'clickRight']);

  const route = useRoute();
  const router = useRouter();
  const active = ref(0);

  const clickLeft = () => {
    if (window.history.length > 1) {
      router.back();
    } else {
      router.push('/');
    }
  };
  const clickRight = () => {
    emit('clickRight');
  };
</script>

<style lang="scss" scoped></style>
